<template>
    <div class="login-layout">
        <div class="logo"><img src="../assets/image/xiaotuzi.png" alt=""></div>
        <div class="login">
            <div class="form-layout">
                <img src="../assets/image/line-login.png" alt="" class="line">
                <input type="text" class="input" placeholder="团队编码" ref="code" v-model="loginForm.code">
            </div>
            <div class="form-layout">
                <img src="../assets/image/line-login.png" alt="" class="line">
                <input type="text" class="input" placeholder="输入用户名" v-model="loginForm.username" ref="username">
            </div>
            <div class="form-layout form-psw" style="margin: 0;">
                <img src="../assets/image/line-login.png" alt="" class="line">
                <input type="password" class="input psw" placeholder="输入密码" v-model="loginForm.password" ref="password">
                <img :src="loginForm.password.length>0?require('../assets/image/login.png'):require('../assets/image/no-login.png')" alt="" class="btn-login" @click="handler">
            </div>
        </div>
    </div>
</template>

<script>
    import { login } from '../api/user'
    import md5 from 'js-md5'

    // import {setlocalStorage,getlocalStorage} from '../utils/index'

    export default {
        name: 'Login',
        data() {
            return {
                loginForm: {
                    username: '',
                    password: '',
                    code: 'C000139'
                },
            }
        },
        mounted() {
          this.$refs.code.focus();
        },
        created() {
            this.loginForm = JSON.parse(localStorage.getItem("loginForm")) ? JSON.parse(localStorage.getItem("loginForm")) : this.loginForm
        },
        methods: {
            handler() {
                if (this.loginForm.code===''){
                    this.$toast('请输入团队编码');
                    this.$refs.code.focus();
                    return;
                }
                if (this.loginForm.username===''){
                    this.$toast('请输入账号');
                    this.$refs.username.focus();
                    return;
                }
                if (this.loginForm.password===''){
                    this.$toast('请输入密码');
                    this.$refs.password.focus();
                    return;
                }
                const loginForm = JSON.parse(JSON.stringify(this.loginForm))
                loginForm.password = md5(loginForm.password)
                login(loginForm)
                    .then(response => {
                        // console.log(response)
                        localStorage.setItem('loginForm',JSON.stringify(this.loginForm))
                        const { data } = response;
                        localStorage.setItem('userInfo', JSON.stringify(data));
                        this.$router.push('/');
                    })
                    .catch(error => {
                        console.log(error)
                    })
            }
        },
    }
</script>

<style scoped>
    .login-layout {
        /*background: #279dff;*/
        background-image: url("../assets/image/beijing.png");
        background-size: 100%;
        min-height: 90vh;
        /*display: flex;*/
        /*align-items: center;*/
        /*justify-content: center;*/
        padding-top: 170px;
    }
    .logo {
        width: 310px;
        /*height: 313px;*/
        margin: 0 auto;
    }
    .logo img {
        width: 100%;
        height: 100%;
    }
    .login {
        width: 600px;
        height: 498px;
        background: #FFFFFF;
        box-shadow: 0 15px 40px 0 rgba(0, 81, 128, 0.15);
        border-radius: 40px;
        padding: 90px 100px 0;
        box-sizing: border-box;
        margin: -27px auto;
    }
    .form-layout {
        width: 400px;
        height: 60px;
        background: #DCFBFF;
        border-radius: 30px;
        border: none;
        outline: none;
        margin-bottom: 50px;
        display: flex;
        display: -moz-flex;
        display: -webkit-flex;
        padding-left: 30px;
        align-items: center;
        box-sizing: border-box;
    }
    .form-psw {
        justify-content: space-between;
    }
    .line {
        height: 32px;
        margin-right: 12px;
    }
    .input {
        height: 100%;
        background: #DCFBFF;
        width: 300px;
        color: #3EC5EF;
        /*flex: 1;*/
    }
    .psw{
        width: 220px;
    }
    input::-webkit-input-placeholder {
        /* placeholder颜色  */
        color: #3EC5EF;
    }
    .btn-login {
        width: 140px;
        margin-right: -10px;
        margin-top: 5px;
    }
</style>